<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>搜索页面</title>
<style type="text/css">
#mydiv {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: 50px
}
.mouseOver{
	background:#708090;
	color: #FFFAFA;
}
.mouseOut{
	background:#FFFAFA;
	color: #000000;
}
</style>
<script type="text/javascript">
	//获得用户输入内容的关联信息的函数
	var xmlHttp;
	function getMoreContents() {
		//首先获得用户的输入
		var content = document.getElementById("keyword"); //要验证的对象JS写法-原生写法
		//var content =$("keyword")  //JQ写法-现在的主流写法
		if (content.valule == "") {
			//当Backspace时候清空
			claerContent();
			return;
		}
		//alert(content.val());//测试
		//然后要给服务器发送用户输入的内容,因为我们采用的是ajax异步发送数据,
		//所以要使用一个对象,叫做XmlHttp对象
		xmlHttp = creatXMLHttp();//-这里调用XmlHttp对象的方法
		//alert(xmlHttp)//测试
		//给服务器发送数据JS写法-原生写法,现在主流写法使用JQ写法
		var url = "search?keyword=" + escape(content.value);
		//true表示javascript脚本会在send()方法之后继续执行,而不会等待来自服务器的响应
		xmlHttp.open("GET", url, true);
		//xmlHttp绑定回调方法,这个回调方法会在xmlHttp状态改变的时候被调用
		//xmlHttp的状态0-4,我们只关心4(complete:完成)这个状态
		//当数据传输的过程完成之后,再调用回调方法才有意义
		xmlHttp.onreadystatechange = callback;
		xmlHttp.send(null);
	}

	//获得XmlHttp对象
	function creatXMLHttp() {
		//对于大多数的浏览器都适用
		var xmlHttp;
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
		//要考虑留言器的兼容性
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			if (!xmlHttp) {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
		}
		return xmlHttp;
	}

	//回调方法
	function callback() {
		//4代表完成
		if (xmlHttp.readyState == 4) {
			//200代表服务器响应成功
			//404代表资源未找到,500代表服务器内部错误
			if (xmlHttp.status == 200) {
				//互交成功,获得相应的数据,是文本格式
				var result = xmlHttp.responseText;
				//解析获得数据
				var json = eval("(" + result + ")");
				//获得数据之后,就可以动态的显示这些数据了,把这些数据展示到输入框的下面
				//alert(json);//测试
				setContent(json);   //调用显示的方法
			}
		}
	}

	//设置关联数据的展示,参数代表的是服务器传递过来的关联数据
	function setContent(contents) {
		//设置数据之前先清空一下
		clearContent();
		//首先获得关联数据的长度,以此来确定生成多少<tr></tr>
		setLocation();    //设置显示关联信息的位置
		var size = contents.length;
		//设置内容
		for (var i = 0; i < size; i++) {
			var nextNode = contents[i];//代表的是json格式数据的地i个元素
			//创建下拉表样式:createElement() 方法创建元素节点。此方法可返回一个 Element 对象。
			var tr = document.createElement("tr");
			var td = document.createElement("td");
			td.setAttribute("border", "0");
			td.setAttribute("bgcolor", "#FFFAFA")
			//当鼠标移动/移出到下拉选项时出发的效果
			td.onmouseover = function() {
				this.className = 'mouseOver';
			}
			td.onmouseout = function() {
				this.className = 'mouseOut'
			}
			td.onclick = function() {
				//这个方法实现的是,当用鼠标点击一个关联的数据时,关联的数据自动设置为输入框的数据
			
			};
			var text = document.createTextNode(nextNode);
			td.appendChild(text);
			tr.appendChild(td);
			document.getElementById("content_table_body").appendChild(tr);
		}
	}

	//清空数据的方法
	function clearContent() {
		var contentTableBody = document.getElementById("content_table_body");
		var size = contentTableBody.childNodes.length;
		for (var i = size - 1; i > 0; i--) {
			contentTableBody.removeChild(contentTableBody.childNodes[i]);
		}
		document.getElementById("popDiv").style.border="none";
	}
	
	//当输入框失去焦点的时候,关联信息清空
	function keywordBlur() {
		clearContent()
	}
	
	//设置显示关联信息的位置
	function setLocation(){
		//关联信息的显示位置要和输入框一一致
		var content=document.getElementById("keyword");
		var width=content.offsetWidth;//输入边框的宽度
		var left=content["offsetLeft"];//到左边框的距离
		var top=content["offsetTop"]+content.offsetHeight;//到顶部的距离
		//获得显示数据的DIV
		var popDiv=document.getElementById("popDiv");
		popDiv.style.border="black 1px solid";
		popDiv.style.left=left+"px";
		popDiv.style.top=top+"px";
		popDiv.style.width=width+"px";
		document.getElementById("content_table").style.width=width+"px";	
	}
</script>

</head>
<body>
	<div id="mydiv">
		<!-- 输入框 :注意onkeyup:onkeyup 事件会在键盘按键被松开时发生。-->
		<input type="text" size="100" id="keyword" onkeyup="getMoreContents()" 
			onblur="keywordBlur()" onfocus="getMoreContents()"/> <input type="button" value="搜索"
			width="50px">
		<!-- 下面是内容展示的区域 -->
		<div id="popDiv">
			<table id="content_table" bgcolor="#FFFAFA" border="0"
				cellspacing="0" cellpadding="0">
				<tbody id="content_table_body">

					<!--  动态查询出来的数据显示在这个地方-->
					<!-- <tr><td>ajax</td></tr>
					<tr><td>ajax1</td></tr>
					<tr><td>ajax2</td></tr> -->
				</tbody>


			</table>

		</div>

	</div>
</body>
</html>